import { Directive, DirectiveBinding } from 'vue';

// 搜索触发滚动事件--只能用于搜索
export const scrollLoad: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding, vnode: any) {
    const wrapDom = el.querySelector<HTMLElement>('.el-autocomplete-suggestion__wrap');
    const listDom = el.querySelector<HTMLElement>('.el-autocomplete-suggestion__wrap  .el-autocomplete-suggestion__list');

    if (wrapDom && listDom) {
      wrapDom.addEventListener(
        'scroll',
        (e) => {
          const condition = wrapDom.offsetHeight + wrapDom.scrollTop + 20 - listDom.offsetHeight;
          console.log('🚀 ~ mounted ~ condition:', condition);

          if (condition > 0 && !vnode.context.loading) {
            // 滚动到底部则执行滚动方法 load，binding.value 就是 v-scrollLoad 绑定的值，加 () 表示执行绑定的方法
            binding.value();
          }
        },
        false
      );
    }
  }
};

// export const scrollLoad: Directive = {
//     mounted(el: HTMLElement, binding: DirectiveBinding,vnode:any) {
//         let wrapDom = el.querySelector(".el-autocomplete-suggestion__wrap");
//         let listDom = el.querySelector(".el-autocomplete-suggestion__wrap  .el-autocomplete-suggestion__list");
//         wrapDom.addEventListener(
//           "scroll",
//           (e) => {
//             let condition = wrapDom.offsetHeight + wrapDom.scrollTop + 20 - listDom.offsetHeight;
//            console.log(condition,'condition000000000000');
//             // console.log(vnode.context.loading,'vnode.context.loading');
//             if (condition > 0 && !vnode.context.loading) {
//               //滚动到底部则执行滚动方法load，binding.value就是v-scrollLoad绑定的值，加()表示执行绑定的方法
//               binding.value();
//             }
//           },
//           false
//         );
//     }
// }
